<DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8">
        <title>mydemo</title>
        <style type="text/css">
            body,
            #outer p {
                margin: 0;
                padding: 0;
            }

            html,
            body {
                height: 100%;
            }

            #outer {
                border: 20px black solid;
                background: black;
                width: 200px;
                height: 200px;
                margin: 10px auto;
            }

            #outer p {
                color: white;
                padding: 10px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function () {
                /*border,background,color,cursor*/
                var oDiv = document.getElementById("outer");
                var oP = document.getElementsByTagName("p")[0];
                oDiv.onmouseover = function () {
                    this.style.cssText = "border-color:red;background:white;cursor:crosshair";
                    oP.style.cssText = "color:red";
                }
                oDiv.onmouseout = function () {
                    this.style.cssText = "";
                    oP.style.cssText = "";
                }

            }
        </script>
    </head>

    <body>
        <div id="outer">
            <p>鼠标移入改变样式，鼠标移出恢复。</p>
        </div>
    </body>

    </html>